<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>WordCloud Demo</title>
        <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript" src="../static/js/echarts.min.js"></script>
        <script type="text/javascript" src="../static/js/echarts-wordcloud.min.js"></script>
    </head>
    <body>
        <div id="main" style="width: 100%; height: 600px"></div>
        <script type="text/javascript">
             var myChart = echarts.init(document.getElementById('main'));
    var app={
        word1:[],
        count1:[]
    };
    $(document).ready(function () {
        getData();
        console.log(app.word1);
        console.log(app.count1);

    });
    function  getData() {
        $.ajax({
            url: '/txt_data',
            data: {},
            type: 'get',
            async: false,
            dataType: 'json',
            success: function (data) {
                app.word1 = data.word;
                app.count1 = data.value;
            }
        });
    }
    getData();
    var aa=[];
                for(var i = 0;i<app.word1.length;i++){
                    aa.push({
                        name:app.word1[i],
                        value: app.count1[i]
                    })
                }
                var data=aa

                //温馨提示：‘image 选取有严格要求不可过大；，否则firefox不兼容  iconfont上面的图标可以
                var maskImage = new Image();
                maskImage.src = "../static/images/2.jpg"


                    option={
                        backgroundColor: '#fff',
                        tooltip: {
                            show: false
                        },
                        series: [{
                                type: 'wordCloud',
                                gridSize: 2,
                                sizeRange: [12, 40],
                                rotationRange: [-45, 0, 45, 90],
                               maskImage: maskImage,
                                textStyle: {
                                    normal: {
                                        color: function () {
                                            return 'rgb(' +
                                                    Math.round(Math.random() * 255) +
                                                    ', ' + Math.round(Math.random() * 255) +
                                                    ', ' + Math.round(Math.random() * 255) + ')'
                                        }
                                    }
                                },
                                left: 'center',
                                top: 'center',
                                // width: '96%',
                                // height: '100%',
                                right: null,
                                bottom: null,
                                // width: 300,
                                // height: 200,
                                // top: 20,
                                data: data
                            }]
                    };
                myChart.setOption(option);



        </script>
    </body>
</html>